{% extends 'base.html' %}

{% block title %}首页{% endblock %}

{% block body %}
    {{ super() }}
<!-- home section starts  -->
<section class="home" id="home">
    <div class="content">
        <h3 class="gradient_text">
            <i class="fas fa-plane-departure"></i><span class="gradient_text">快乐云&trade;</span>
        </h3>
        <p>云上快乐&hearts;无处不在&hearts;</p>
        <p><a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=X1gmcenmmcSU0MGkoeOroHpBZkkmxi01&jump_from=webapi"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png"></a></p>
        <a href="#pricing" class="btn gradient">订购</a>
    </div>

    <div class="image">
        <img src="/images/rocket.svg" alt="rocket">
    </div>

    <div class="cloud cloud-1"></div>
    <div class="cloud cloud-2"></div>
</section>
<!-- home section ends -->

<!-- pricing section starts  -->
<section class="pricing" id="pricing">

    <h1 class="heading"><p class="gradient_text">快乐云&trade;</p><span>价格</span> </h1>

    <div class="box-container">
        <div class="box">
            <form method="post" novalidate>
                <h3>弹性云</h3>
                <img src="/images/p-1.png" alt="">
                <div class="price">
                    <i class="fas fa-yen-sign"></i><p class="di calc_price">2</p><span>/月</span>
                </div>
                <ul>
                    <li>✅弹性选择</li>
                    <li>💯稳定快速</li>
                    <li>💻技术支持</li>
                    <li>✅国内备案</li>
                    <li>⛔禁放违规</li>

                    <li><p class="f2 mv4">☁️大小:<span id="value"></span>M</p></li>
                    
                    <li>
                        <div class="slideContainer relative">
                            <input name="range" type="range" min="0" max="1000" value="100" step="100" id="myRange" class="slide">
                        </div>
                    </li>
                    
                    <li class="mt3">
                        <i class="fas fa-globe"></i>
                        {% if hosts %}
                        <select class="radios select_spacing" id="hostip" name="hostip" required>
                            {% for host in hosts %}
                            <option value="{{ host.ip }}" class="select_spacing">{{ host.area }}</option>
                            {% endfor %}
                        </select>
                        {% endif %}
                    </li>
                </ul>

                <input class="btn gradient" id="submit" name="submit" type="submit" value="订购😃">
                
                <div class="errors">
                    <span><label for="errs">{{ tips }}</label></span>
                </div>
            </form>
        </div>

        <div class="box">
            <form method="post" novalidate>
                
                <input id="user_id" name="user_id" type="hidden" value="0">
                <input id="balance" name="balance" type="hidden" value="0.0">
                <input id="area" name="area" type="hidden" value="香港③">

                <input id="price" name="price" required  type="hidden" value="0">

                <input id="hostsize" name="hostsize" required type="hidden" value="200">
                <h3>跑路云</h3>
                <img src="/images/p-2.png" alt="">
                <div class="price">
                    <i class="fas fa-yen-sign"></i><p class="di calc_price">0.0</p><span>/月</span>
                </div>
                <ul>
                    <li>🏃随机跑路</li>
                    <li>❓随机宕机</li>
                    <li>💾无法备份</li>
                    <li>✅固定选择</li>
                    <li>💯数据丢失</li>
                </ul>
            </form>
            <input class="btn gradient" id="submit" name="submit" type="submit" value="补货ing😃">
        </div>

        <div class="box">
            <form method="post" novalidate>
                <input id="user_id" name="user_id" type="hidden" value="0">
                <input id="balance" name="balance" type="hidden" value="0.0">
                <input id="area" name="area" type="hidden" value="香港③">
                <input id="price" name="price" required  type="hidden" value="0.0">
                <input id="hostsize" name="hostsize" required type="hidden" value="0">
                <h3>不限内容</h3>
                <img src="/images/p-3.png" alt="">
                <div class="price">
                    <i class="fas fa-yen-sign"></i>0.0<span>/月</span>
                </div>
                <ul>
                    <li>✅不限内容</li>
                    <li>💯安全稳定</li>
                    <li>💻技术支持</li>
                    <li>✅安全无忧</li>
                    <li>💯顺利出海</li>
                </ul>
            </form>
            <input class="btn gradient" id="submit" name="submit" type="submit" value="补货ing😃">
        </div>

    </div>

</section>

<!-- pricing section ends -->

<!-- idc section starts  -->
<section class="idc" id="idc">

    <h1 class="heading"><p class="gradient_text">快乐云&trade;</p><span>节点</span> </h1>

    <div class="box-container">
        {% for host in hosts %}
        <div class="box">
            <div class="node">
                <div class="info">
                    <h3>{{ host.area }}</h3>
                    <!-- <h3>{{ host.ip }}</h3> -->
                    <!-- <h3>{{ host.status }}</h3> -->
                </div>
                <i class="fas fa-quote-right"></i>
            </div>
        </div>
        {% endfor %}
    </div>

</section>
<!-- idc section end  -->

{% endblock %}

{% block footer %}
{{ super() }}
{% endblock %}

{% block script %}
{{ super() }}
    <script>
        var slider = document.querySelector("#myRange");
        var output = document.querySelector("#value");
        var calc_price = document.querySelector(".calc_price");
        output.innerHTML = slider.value;
        calc_price.innerHTML = slider.value / 100;

        slider.oninput = function(){
            output.innerHTML = this.value;
            output.setAttribute('data',this.value);
            calc_price.innerHTML = slider.value / 100;
            calc_price.setAttribute('data',this.value / 100);
            // console.log('input slider v : ' + this.value );
            var x = this.value / 10;
            console.log('x ' + x );
            var color = 'linear-gradient(90deg, rgb(107, 111, 237)' + x + '%, rgb(214, 214, 214)' + x +'%)';
            slider.style.background = color;
        }
        // backup for every thing
        slider.addEventListener("mousemove",function(){
            var x = slider.value / 10;
            console.log('x ' + x );
            var color = 'linear-gradient(90deg, rgb(107, 111, 237)' + x + '%, rgb(214, 214, 214)' + x +'%)';
            slider.style.background = color;
        })
    </script>
{% endblock %}